<template>
  <zz-Dialog
    v-model="dialogVisible"
    :title="'新增用户'"
    align-center
    @ok="handleOk"
    @close="handleClose"
    :loading="loading"
    size="large"
  >
    <div class="add-user-body">
      <div class="steps-header">
        <zz-Steps
          :steps="[
            { title: '用户快照' },
            { title: '系统配置' },
            { title: '账号绑定' },
          ]"
          :current="currentStep"
        />
      </div>
      <template v-if="currentStep === 0">
        <div class="user-snap">
          <zz-Form
            ref="basicInfoRef"
            :model="model"
            title="基本信息"
            :label-width="100"
            style="margin-top: 10px"
          >
            <el-col :span="12">
              <el-form-item label="用户编码" prop="userCode">
                <el-input
                  v-model="model.userCode"
                  placeholder="请输入..."
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="model.sex">
                  <el-radio value="1">男</el-radio>
                  <el-radio value="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名称" prop="userName">
                <el-input
                  v-model="model.userName"
                  placeholder="请输入..."
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idNumber">
                <el-input
                  v-model="model.idNumber"
                  placeholder="请输入..."
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生年月" prop="birthDay">
                <el-date-picker
                  type="date"
                  v-model="model.birthDay"
                  placeholder="请选择..."
                  transfer
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input
                  v-model="model.age"
                  type="number"
                  placeholder="请输入..."
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="telephone">
                <el-input
                  v-model="model.telephone"
                  placeholder="请输入..."
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="model.email"
                  placeholder="请输入..."
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="address">
                <el-input
                  v-model="model.address"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  placeholder="请输入..."
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </zz-Form>
        </div>
      </template>
      <!-- 步骤条 -->
      <!-- 步骤1：填写用户快照 -->
      <!-- 步骤2：设置用户相关的系统设置 -->
      <!-- 步骤3：绑定用户账号 -->
    </div>
  </zz-Dialog>
</template>

<script setup>
import { ref, reactive, computed, watch, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

// Emits
const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

watch(
  dialogVisible,
  (newValue, oldValue) => {
    if (newValue) {
      init();
    }
  },
  { immediate: true }
);

const loading = ref(false);

// 表单
const basicInfoRef = ref(null);
const educationInfoRef = ref(null);
const model = ref({
  userCode: "",
  sex: "",
  userName: "",
  idNumber: "",
  birthDay: "",
  age: "",
  telephone: "",
  email: "",
  address: "",
});

// 组件基本功能
const init = () => {
  // todo: 初始化操作
};
const handleOk = async () => {
  loading.value = true;
  let param = dealParam();
  let res = await proxy.$API.userManagement.user.save.post(param);
  if (res.code === "01") {
    proxy.$message.success("保存成功");
    // this.cancel("ok");
    loading.value = false;
  } else {
    proxy.$message.error(res.message);
    loading.value = false;
  }
};

// 处理保存参数
const dealParam = () => {
  let param = {
    ...model.value,
  };
  // 其他格式
  param.birthDay = proxy.$TOOL.format.formatDateTime(model.value.birthDay);
  return param;
};

const handleClose = () => {
  dialogVisible.value = false;
};

// 步骤条
const currentStep = ref(0);
</script>

<style lang="less" scoped>
.add-user-body {
  display: flex;
  flex-direction: column;
  /* 控制整体滚动区域高度，避免撑过弹窗 */
  max-height: 70vh;
}

.steps-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--el-bg-color);
}

.user-snap {
  padding: 5px;
}
</style>
